// 统一的注册所有的全局组件
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarouse from '@/components/carousel/index.vue'
import { App } from 'vue'
import XtxMore from './more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from './city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
// import defaultImg from '@/assets/images/200.png'

export default {
  // app 创建出来的应用实例 =》 类型是固定的 =》 vue内部会提供好实例类型的
  install(app:App){
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarouse.name, XtxCarouse)
    app.component(XtxMore.name,XtxMore)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component('XtxCity', XtxCity)
    app.component('XtxNumbox', XtxNumbox)
    app.component('XtxButton', XtxButton)
    // 构建指令
    // <img :src="item.picUrl" ref="targer" />
    // 希望实现 v-lazy得定义一下
    // <img v-lazy="item.picUrl" ref="targer" />
    app.directive('lazy', {
      // 指令所在的元素节点，被插入 父节点时触发  inserted vue2 等价 mounted vue3
     mounted(el, binding) {
      // el 目标元素，binding 指令相关信息
      // console.log(el, binding);
      const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
         if (isIntersecting) {
          // 停止监听
          stop()
          // 给el 元素设置src 属性
          el.src = binding.value
           // 如果图片加载失败，显示一张默认的图片
          //  el.onerror = () => {
          //      // 设置加载失败的图片
          //      el.src = defaultImg
          //  }
         }
      })
         
   
     
      }
    })
  }
}